<template>
  <div class="user">
    <div class="page-search">
      <div class="page_search">
        <div class="search_item">
          <span class="label">User Name</span>
          <el-select
            v-model="formData.user_name"
            placeholder="Please enter keywords"
            filterable
            clearable
            :filter-method="handleUsernameChange"
          >
            <el-option
              v-for="item in user_name_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- <div class="search_item">
          <span class="label">Page</span>
          <el-select
            v-model="formData.page"
            placeholder="Please enter keywords"
            filterable
            clearable
          >
            <el-option
              v-for="item in status_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div> -->
        <div class="search_item">
          <span class="label">Date</span>
          <el-date-picker
            v-model="formData.date_range"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </div>
      </div>
      <div class="handle-btns">
        <el-button icon="el-icon-refresh" @click="handleResetClick"
          >Reset</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQueryClick(formData)"
          >Search</el-button
        >
      </div>
    </div>

    <div class="page-content">
      <lz-table
        :listData="dataList"
        :listCount="dataCount"
        v-bind="contentTableConfig"
        v-model:page="pageInfo"
      >
        <template #headerHandler>
          <el-button type="primary" size="default" @click="handleExportClick">
            Export
          </el-button>
        </template>
      </lz-table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, computed, reactive } from 'vue'
import { useStore } from '@/store'

import LzTable from '@/base-ui/table'

import { contentTableConfig } from './config/content.config'
import { getPageListData } from '@/service/main/system/system'
import { BASE_ROUTE } from '@/service/request/config'
import { ElMessageBox } from 'element-plus'

export default defineComponent({
  name: 'record',
  components: {
    LzTable
  },
  setup() {
    const store = useStore()

    // 1.优化一: formData中的属性应该动态来决定
    const formData = reactive({
      user_name: '',
      date_range: ''
    })
    // const status_options = [
    //   {
    //     value: 'MRR main page',
    //     label: 'MRR main page'
    //   },
    //   {
    //     value: 'SSIC',
    //     label: 'SSIC'
    //   }
    // ]

    const user_name_options = ref<any[]>([])
    const permission_name_options = ref<any[]>([])

    const handleUsernameChange = async (query: any) => {
      if (query) {
        console.log(query)
        formData.user_name = query
        const pageResult = await getPageListData('/user/filter_user_name', {
          query
        })
        console.log(pageResult.data)
        user_name_options.value = pageResult.data.list
      } else {
        user_name_options.value = []
      }
    }

    const handleResetClick = () => {
      formData.user_name = ''
      formData.date_range = ''
      store.dispatch('system/getPageListAction', {
        pageName: 'record',
        queryInfo: {
          offset: 0,
          size: 10
        }
      })
    }
    const handleQueryClick = (queryInfo: any) => {
      console.log('1111')
      console.log(queryInfo)
      // console.log(pageContentRef.value)
      getPageData({ filter_field: queryInfo })
    }

    const pageInfo = ref({ currentPage: 1, pageSize: 10 })
    watch(pageInfo, () => getPageData({ filter_field: formData }))

    const getPageData = (queryInfo: any = {}) => {
      // if (!isSelect) return
      console.log('1111')
      // console.log(queryInfo)
      store.dispatch('system/getPageListAction', {
        pageName: 'record',
        queryInfo: {
          offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
          size: pageInfo.value.pageSize,
          ...queryInfo
        }
      })
    }
    getPageData()

    // 3.从vuex中获取数据
    const dataList = computed(() =>
      store.getters[`system/pageListData`]('record')
    )
    const dataCount = computed(() =>
      store.getters[`system/pageListCount`]('record')
    )

    const handleExportClick = async () => {
      console.log('click export')
      const pageUrl = `/user/download_record_list`
      const pageResult = await getPageListData(pageUrl, formData)
      console.log(pageResult)
      window.open(BASE_ROUTE + pageResult.data.filepath)
    }

    return {
      formData,
      contentTableConfig,
      handleResetClick,
      handleQueryClick,

      dataList,
      getPageData,
      dataCount,
      pageInfo,
      user_name_options,
      permission_name_options,
      handleUsernameChange,
      handleExportClick
    }
  }
})
</script>

<style scoped lang="less">
.page_search {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  .search_item {
    display: flex;
    align-items: center;
    .label {
      margin-right: 5px;
      margin-left: 20px;
    }
  }
}
.page-content {
  padding: 20px;
  border-top: 20px solid #f5f5f5;
}
.el-table .warning-row {
  background: #f0f9eb;
}
.handle-btns {
  text-align: right;
  padding: 20px 50px 20px 0;
}
</style>
